<template>
  <div :style="{height: documentHeight-250 + 'px',width: '100%', overflow:'auto' }">
    <!--    <div style="font-size:12px;height: 40px;width:100%;text-align: center;color: #FFF;line-height: 40px ">-->
    <!--&lt;!&ndash;      在这里配置数据的来源端和写入端；可以是默认的数据源，也可以是您创建的自有数据源<a>查看支持的数据来源类型</a>&ndash;&gt;-->
    <!--    </div>-->
    <div>

      <el-collapse v-model="activeNames">
        <!--       选择数据源-->
        <el-collapse-item name="1">
          <template slot="title">
            <svg-icon
              style="width: 120px;height: 30px"
              icon-class="label4" />
            <span style="margin-left:18%;color: #fff;">startId</span>
            <span style="margin-left:45%;color: #fff;">endId</span>
          </template>
          <div style="display: flex; height: 200px; flex-direction:row">
            <div style="width: 50%;">
              <el-form label-width="120px" ref="dataSourceForm" :model="addform">
                <el-form-item label="取值">
                  <el-input style="width: 100%" size="mini" placeholder=""
                            v-model="addform.srcStartId"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div style="width: 50%;">
              <el-form label-width="120px" :model="addform" ref="dataSourceTo">
                <el-form-item label="数据源">
                  <el-select filterable style="width: 32%" size="mini" @change="dataToChange()"
                             v-model="addform.srcDatasourceId"
                             placeholder="数据源">
                    <el-option
                      v-for="item in dataSourceOptions"
                      :key="item.id"
                      :label="item.datasourceName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <el-select filterable clearable style="width: 32%;margin-left: 5px" v-if="schemastotag" size="mini"
                             @change="dataToschemaChange()"
                             v-model="addform.srcSchema"
                             placeholder="schema">
                    <el-option
                      v-for="(item,index) in schemasToOption"
                      :key="index"
                      :label="item.lable"
                      :value="item.lable">
                    </el-option>
                  </el-select>
                  <el-select filterable style="width: 32%;margin-left: 5px" clearable ref="tableToSelect" size="mini"
                             @change="tableToChange()" v-model="addform.srcTableName" placeholder="选择表">
                    <el-option
                      v-for="(item,index) in tableToOptions"
                      :key="index"
                      :label="item.lable"
                      :value="item.lable">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="筛选条件">
                  <el-input style="width: 91%" size="mini" placeholder="where条件，不需要再加where"
                            v-model="addform.srcWhereParam"></el-input>
                </el-form-item>
                <!--                <el-form-item label="主键表达式">-->
                <!--                  <el-input style="width: 91%" type="textarea" size="mini" :rows="4"-->
                <!--                            placeholder="" v-model="addform.srcSqlText"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item label="增量表达式">
                  <el-input style="width: 91%" type="textarea" size="mini" :rows="4"
                            placeholder="" v-model="addform.srcIdExpression"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <svg-icon
              style="width: 120px;height: 30px"
              icon-class="label5" />
          </template>
          <div style="width: 100%;margin-top: 10px">
            <el-form label-width="120px" :rules="rules" :model="addform" ref="dataSourceTo">
              <el-form-item label="运行参数">
                <el-input style="width: 44.9%" size="mini"
                          placeholder="" v-model="addform.cmdParam"></el-input>
              </el-form-item>
              <el-form-item label="运行配置" prop="jsonText">
                <el-input style="width: 96%" type="textarea" size="mini" :rows="23"
                          placeholder="" v-model="addform.jsonText"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import Print from "@/util/print";
import axios from "axios";
import fieldMapping from "./fieldMapping.vue";
import { debounce } from "../../../util";

export default {
  name: "demo1",
  components: { fieldMapping },
  watch: {},
  data() {
    var validateJson = (rule, value, callback) => {
     if(!this.isJSON(value)&&value) {
       callback(new Error('请输入json格式数据'));
     }else {
       callback();
     }
    };
    return {
      value1: "全部",
      value2: "",
      nodename: {
        nodename: ""
      },
      activeNames: ["1", "2"],
      addform: {
        srcWhereParam: "",
        cmdParam: '-p  \"-DstartId=${startId}\"   \"-DendId=${endId}\" ',
        srcStartId: "",
        srcDatasourceId: "",
        srcSchema: "",
        srcTableName: "",
        srcSqlText: "",
        jsonText: "",
        srcIdExpression: ""
      },
      dataSourceOptions: [],
      tableOptions: [],
      schemasFromOption: [],
      tableToOptions: [],
      schemasToOption: [],
      abilityDisabled: true,
      schemastotag: false,
      schemasfromtag: false,
      rules: {
        jsonText: [
          { validator: validateJson, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          var obj=JSON.parse(str);
          if(typeof obj == 'object' && obj ){
            return true;
          }else{
            return false;
          }

        } catch(e) {
          console.log('error：'+str+'!!!'+e);
          return false;
        }
      }
      console.log('It is not a string!')
    },

//反显数据
    invertData(data) {
      console.log(data);
      if (data) {
        this.addform = data;
        this.dataToChange("invert");
      }
    },
    getFormOption() {
      return this.$http.post("/offlineSync/findDatasource").then((res) => {
        this.dataSourceOptions = res.data;
      });
    },
    //数据去向 数据源下拉框change事件 tag用于判断是否需要自动打开下拉框
    dataToChange(tag) {
      this.tableToSelect = [];
      this.tableToOptions = [];
      this.schemasToOption = [];
      if (!this.addform.srcDatasourceId) {
        return;
      }
      let querydata = {
        datasourceId: this.addform.srcDatasourceId
      };
      this.$http.post("/offlineSync/findTableNames", querydata).then((res) => {
        if (res.data.tables) {
          res.data.tables.forEach((item) => {
            let option = {
              lable: ""
            };
            option.lable = item;
            this.tableToOptions.push(option);
          });
        }
        if (res.data.schemas && res.data.schemas.length > 0) {
          this.schemastotag = true;
          res.data.schemas.forEach((item) => {
            let option = {
              lable: ""
            };
            option.lable = item;
            this.schemasToOption.push(option);
          });
        } else {
          this.schemastotag = false;
        }
      }).finally(() => {
        if (!tag) {
          this.$nextTick(_ => {
            this.addform.srcSchema = "";
            this.addform.srcTableName = "";
          });
          this.$refs.tableToSelect.toggleMenu();
        }
      });
    },
    dataToschemaChange(tag) {
      this.tableToSelect = [];
      this.tableToOptions = [];
      this.schemasToOption = [];
      let querydata = {
        datasourceId: this.addform.srcDatasourceId,
        schema: this.addform.srcSchema
      };
      this.$http.post("/offlineSync/findTableNames", querydata).then((res) => {
        if (res.data.tables) {
          res.data.tables.forEach((item) => {
            let option = {
              lable: ""
            };
            option.lable = item;
            this.tableToOptions.push(option);
          });
        }
        if (res.data.schemas && res.data.schemas.length > 0) {
          this.schemastotag = true;
          res.data.schemas.forEach((item) => {
            let option = {
              lable: ""
            };
            option.lable = item;
            this.schemasToOption.push(option);
          });
        } else {
          this.schemastotag = false;
        }

      }).finally(() => {
        if (!tag) {
          this.$nextTick(_ => {
            this.addform.srcTableName = "";
          });
          this.$refs.tableToSelect.toggleMenu();
        }
      });
    },
    //数据去向 表下拉框change事件
    tableToChange() {
      // let querydata = {
      //   datasourceId: this.addform.dataSource,
      //   tableName: this.addform.dataSourceTable,
      //   schema: this.addform.schema
      // };
      // return this.$http.post("/dataWork/findColumns", querydata).then((res) => {
      //   console.log(res);
      //   this.$refs.fieldMapping.drawToTable(res.data);
      // }).finally(() => {
      //   this.activeNames = ["1", "2", "3"];
      // });
    },
    //清空表单
    restForm() {
      this.addform = {
        srcStartId: "",
        srcDatasourceId: "",
        srcSchema: "",
        srcSqlText: "",
        jsonText: "",
        cmdParam: "",
        srcIdExpression: "",
        srcWhereParam: ""
      };
      this.tableOptions = [];
      this.schemasFromOption = [];
      this.schemasToOption = [];
      this.tableToOptions = [];
      this.activeNames = ["1", "2"];
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 130;
    }
  },
  created() {
  },
  mounted() {
    this.getFormOption();
  }
};
</script>

<style scoped>
</style>
